<!-- 这是一个商品组件,主要应用在分类中 -->
<template>
	<view class="goods">
		<image class="img" :src="goods.img" mode="scaleToFill"></image>
		<view class="info">
			<text class="name">{{goods.name}}</text>
			<view class="middle">
				<text class="vip-price">¥{{goods.vipprice}} </text><text class="discount"> {{goods.discount}}折</text>
			</view>
			<view class="bottom">
				<view class="price">¥{{goods.price}}</view>
				<view class="num-control">
					<num-control :number="goods.number" @changeNum="changeNum($event, goods)"></num-control>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NumControl from './NumControl.vue'
	export default {
		props: {
			goods: {
				/**
				 * {params}
				 * id: 商品id.
				 * discount: 折扣.
				 * img: 图片地址.
				 * name: 商品名.
				 * number: 数量
				 * price: 原价.
				 * stock: 库存.
				 * tiaoid: skuid.
				 * vipprice: 现价.
				 */
				type: Object
			}
		},
		onReady:function(){
			// console.log(this.goods)
		},
		methods: {
			changeNum(type, goods) {
				// 这里进行判断加入购物车以及数量显示更改
				if (type === 'increase') {
					goods.number++
				} else {
					goods.number--
				}
			}
		},
		components: {
			NumControl
		}
	}
</script>

<style lang="scss">
@import '~@/common/css/mixin.scss';
.goods {
	display: flex;
	width: 100%;
	background-color: #fff;
	padding: 24upx;
	box-sizing: border-box;
	.img {
		width: 180upx;
		height: 180upx;
	}
	.info {
		flex: 1;
		display: flex;
		justify-content: space-between;
		padding-left: 24upx; 
		flex-direction: column;
		box-sizing: border-box;
		.name {
			// @extend %ell;
			// width: 318upx;
			max-height: 80upx;
			overflow: hidden;
			font-size: 28upx;
			line-height: 40upx;
			font-weight: 550;
		}
		.middle {
			color: $SUB_F;
			font-size: 18upx;
			.vip-price {
				margin-right: 8upx; 
				text-decoration: line-through;
			}
		}
		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			.price {
				font-size: 25upx;
				font-weight: bold;
			}
		}
	}
}
</style>
